<template>
	<view class="sheet" :class="{show:value}" @touchmove.prevent>
		<view class="mask">
			
		</view>
		<view class="box">
			<view class="sheet-head">
				<text class="u-font-32">{{title}}</text>
			</view>
			<view class="sheet-body">
				<textarea 
					v-model="content" 
					:maxlength="maxLength" 
					:placeholder="placeholder" 
					class="textarea u-font-32" 
					placeholder-class="u-font-32" 
					:focus="focus"
					:show-confirm-bar="false"
					:adjust-position="false"
					@keyboardheightchange="onKeyboardheightchange"
				></textarea>
			</view>
			<view class="sheet-foot">
				<view class="item" @tap="cancel()">
					<text class="u-font-32" :style="{color:cancelColor}">{{cancelText}}</text>
				</view>
				<view class="item" @tap="confirm()">
					<text class="u-font-32" :style="{color:confirmColor}">{{confirmText}}</text>
				</view>
			</view>
			<view :style="{height:`${keyboard.height}px`}">
			</view>
			<view v-show="!keyboard.height" class="area-b"></view>
		</view>
	</view>
</template>

<script>
	import { delay } from '@/utils/util'
	export default{
		props:{
			value:{
				type:Boolean,
				default:false
			},
			title:{
				type:String,
				default:''
			},
			placeholder:{
				type:String,
				default:'输入点什么吧'
			},
			maxLength:{
				type:Number,
				default:200
			},
			confirmText:{
				type:String,
				default:'确认'
			},
			confirmColor:{
				type:String,
				default:'#2979ff'
			},
			cancelText:{
				type:String,
				default:'取消'
			},
			cancelColor:{
				type:String,
				default:'#333333'
			}
		},
		data(){
			return {
				content:'',
				focus:false,
				keyboard:{
					height:0
				}
			}
		},
		watch:{
			value(val){
				if(val){
					this.focus = false
					delay(300).then(()=>{
						this.focus = true
					})
				}
			}
		},
		methods:{
			close(){
				this.$emit('input',false)
				this.focus = false
				this.content = ''
			},
			confirm(){
				this.$emit('confirm',this.content)
				this.close()
			},
			cancel(){
				this.$emit('cancel',this.content)
				this.close()
			},
			onKeyboardheightchange({detail:{height}}){
				this.keyboard.height = height
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sheet{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 500;
		display: flex;
		flex-direction: column;
		background-color: rgba($color:#000000, $alpha:0.5);
		transform: translateY(200%);
		&.show{
			transform: translateY(0);
			.box{
				transform: translateY(0);
				transition: transform 300ms ease-out;
			}
		}
		.mask{
			flex:1;
		}
		.box{
			background-color: #ffffff;
			border-radius: 30rpx 30rpx 0 0;
			transform: translateY(100%);
		}
		.sheet-head{
			text-align: center;
			padding: 40rpx 30rpx;
		}
		.sheet-body{
			padding: 0 30rpx 30rpx;
			.textarea{
				background-color: #F5F5F5;
				width: 100%;
				height: 240rpx;
				border-radius: 10rpx;
				padding: 20rpx;
			}
		}
		.sheet-foot{
			border-top: 20rpx solid #F5F5F5;
			display: flex;
			.item{
				flex: 1;
				padding: 30rpx;
				text-align: center;
			}
		}
	}
</style>